<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入 layui.css -->
    <link href="//unpkg.com/layui@2.7.2/dist/css/layui.css" rel="stylesheet">

    <!-- 引入 layui.js -->
</head>
<body>

<blockquote class="layui-elem-quote">查看订单详细</blockquote>
<table class="layui-table">
    <colgroup>
        <col width="150">
        <col >
        <col width="130">
        <col>
    </colgroup>
    <thead>
    <tr>
        <th colspan="4">订单信息</th>

    </tr>
    </thead>
    <tbody>
    <tr>
        <td>订单号：</td>
        <td id="orderNo"></td>
        <td>下单时间：</td>
        <td id="payTime"></td>
    </tr>
    <tr>
        <td>订单总额：</td>
        <td id="payAmount"></td>
        <td>来源：</td>
        <td id="sourceFlag"></td>
    </tr>
    <tr>
        <td>下单用户：</td>
        <td id="buyerUserName"></td>
        <td>订单状态：</td>
        <td id="status"></td>
    </tr>
    <tr>
        <td>采购商留言：</td>
        <td id="buyRemark"></td>
        <td>供应商：</td>
        <td id="supplerUserId"></td>
    </tr>
    <tr>
        <td>企业名称：</td>
        <td id="companyName"></td>
        <td>店铺名称：</td>
        <td id="shopName"></td>
    </tr>
    <tr>
        <td>供应商留言：</td>
        <td id="supRemark"></td>
        <td>订单类型：</td>
        <td id="orderType"></td>
    </tr>
    <tr>
        <td>采购商联系电话：</td>
        <td name="buyerUserName"></td>
        <td>配送方式：</td>
        <td id="addrType"></td>
    </tr>
    </tbody>
</table>
<div name="tag" style="height: 35px;padding: 10px">
    <div  style="float: left;margin-left: 65%;padding-top:10px">
        <i class="layui-icon" style="color: greenyellow">&#xe607;</i>
    </div>
    <div style="float: left;padding-top:10px ">
        <h4 style="font-weight: 600">支付总金额(含运费):</h4>
    </div>
    <div  style="float: right;margin-right: 10px">
        <h1 style="color: red" id="fee">￥0.01</h1>
    </div>
</div>
<!--<img src="'http://newready.image.greenchoicechina.com/'+'2020/06/18/b13a3728-fa7d-4e77-bbe2-253609b84ea1.jpg'" alt="图片">-->
<table class="layui-table" style="margin-top: 20px">
    <colgroup>
        <col>
        <col>
        <col>
        <col>
    </colgroup>
    <thead>
    <tr >
        <th colspan="10">订单商品列表</th>
    </tr>
    </thead>
    <tr>
        <td>序号</td>
        <td>商品图片</td>
        <td>商品名称</td>
        <td>规格</td>
        <td>单价</td>
        <td>购买数量</td>
        <td>商品价格</td>
        <td>实际支付金额</td>
        <td>是否退货</td>
        <td>运费</td>
    </tr>
<script type="text/html">
    {{#
        alert("aaaa ");
    }}
</script>
    <tbody id="tbody">



    </tbody>
</table>

    <table class="layui-table" style="margin-top: 20px">
        <colgroup>

        </colgroup>
        <thead>
        <tr >
            <th colspan="3">订单流程</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>制作人</td>
            <td>描述</td>
            <td>时间</td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>


        </tbody>
</table>

<script src="http://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="//unpkg.com/layui@2.7.2/dist/layui.js"></script>

<script>
    $(function () {
        var query = decodeURI(window.location.search.substring(1));
        var orderNo = "";
        var vars = query.split("&");
        for (var i = 0; i < vars.length; i++) {
            var pair = vars[i].split("=");
            if (pair[0] === 'orderNo') {
                orderNo=pair[1];
            }
        }
        $.ajax({
            url: '/order/selectDetail/'+orderNo,
            type: 'GET',
            dataType: 'json',
            success: function (datas) {
                if (datas.code === 0) {
                    $("#orderNo").html(datas.data.buyerUserName);
                    $("#payTime").html(datas.data.payTime);
                    $("#payAmount").html(datas.data.payAmount);
                    $("#sourceFlag").html(datas.data.sourceFlag);
                    $("#buyerUserName").html(datas.data.buyerUserName);
                    $("#status").html(datas.data.status);
                    $("#buyRemark").html(datas.data.buyRemark);
                    $("#supplerUserId").html(datas.data.supplerUserId);
                    $("#companyName").html(datas.data.companyName);
                    $("#shopName").html(datas.data.shopName);
                    $("#supRemark").html(datas.data.supRemark);
                    $("#orderType").html(datas.data.orderType);
                    $("td[name='buyerUserName']").html(datas.data.buyerUserName);
                    $("#addrType").html(datas.data.addrType);
                    $("#fee").html("￥"+datas.data.payAmount);
                    var list = datas.data.orderGoods;
                    console.log(list);
                    for(var i=0;i<list.length;i++){
                        console.log(list[i].id);
                        $("#tbody").append('<tr>\n' +
                            '        <td>'+list[i].id+'</td>\n' +
                            '        <td><img src="http://newready.image.greenchoicechina.com/'+list[i].goodsImg+'" alt="图片"></td>\n' +
                            '        <td>'+list[i].goodsName+'</td>\n' +
                            '        <td>'+list[i].specValues+'</td>\n' +
                            '        <td>'+list[i].goodsPrice+'</td>\n' +
                            '        <td>'+list[i].goodsCount+'</td>\n' +
                            '        <td>'+list[i].goodsModifyPrice+'</td>\n' +
                            '        <td>'+list[i].goodsSettPrice+'</td>\n' +
                            '        <td>'+list[i].isRefund+'</td>\n' +
                            '        <td>'+list[i].goodsFee+'</td>\n' +
                            '    </tr>');
                    }
                }
            },
            error: function (data) {
                layer.msg('查询失败！', {icon: 1});
                location.reload();
            }
        });
    });

</script>
</body>
</html>